import { Button, Col, Form, Input, Row, message } from 'antd';
import { useState } from 'react';

import { sendCaptcha } from '@/api/auth';
import Dialog from '@/components/common/Dialog';

export default function EditEmailDialog({ open, onCancel, onOk }) {
    const [form] = Form.useForm();
    const [captchaCooldown, setCaptchaCooldown] = useState(0);
    const [isSendingCaptcha, setIsSendingCaptcha] = useState(false);

    // 发送验证码处理函数（与忘记密码页面相同逻辑）
    const handleSendCaptcha = async () => {
        try {
            const email = form.getFieldValue('email');
            if (!email || !/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email)) {
                form.setFields([{ name: 'email', errors: ['请输入有效的邮箱地址'] }]);
                return;
            }

            setIsSendingCaptcha(true);
            await sendCaptcha({ email });
            message.success('验证码已发送');

            // 倒计时逻辑
            let countdown = 60;
            setCaptchaCooldown(countdown);
            const timer = setInterval(() => {
                countdown -= 1;
                setCaptchaCooldown(countdown);
                if (countdown <= 0) clearInterval(timer);
            }, 1000);
        } catch (error) {
            console.error('发送失败:', error);
        } finally {
            setIsSendingCaptcha(false);
        }
    };

    return (
        <Dialog
            title="修改邮箱"
            dialogOpen={open}
            onOk={() => form.submit()}
            onCancel={onCancel}
            okText="提交"
            cancelText="取消"
            style={{
                width: 400,
                height: 260,
            }}
        >
            <Form
                form={form}
                style={{ marginTop: 24 }}
                onFinish={(values) => {
                    onOk(values);
                }}
            >
                <Form.Item
                    name="email"
                    label="邮箱"
                    rules={[
                        { required: true, message: '请输入邮箱' },
                        { type: 'email', message: '邮箱格式不正确' },
                    ]}
                >
                    <Input placeholder="请输入注册邮箱" />
                </Form.Item>

                <Form.Item name="captcha" label="验证码" rules={[{ required: true, message: '请输入验证码' }]}>
                    <Row gutter={8}>
                        <Col span={12}>
                            <Input placeholder="6位验证码" />
                        </Col>
                        <Col span={12}>
                            <Button
                                onClick={handleSendCaptcha}
                                disabled={captchaCooldown > 0 || isSendingCaptcha}
                                block
                            >
                                {isSendingCaptcha
                                    ? '发送中...'
                                    : captchaCooldown > 0
                                      ? `${captchaCooldown}秒后重试`
                                      : '获取验证码'}
                            </Button>
                        </Col>
                    </Row>
                </Form.Item>
            </Form>
        </Dialog>
    );
}
